.social {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}

.social__item {
  padding: 0;
  margin: 0;
  width: 46px;
  height: 48px;
  background-color: $light-grey-blue;
  margin-right: 3px;
  margin-left: 3px;
  box-sizing: border-box;
  list-style: none;
  position: relative;
  cursor: pointer;

  &:first-child {
    margin-left: 0;
  }

  &:last-child {
    margin-right: 0;
  }
}

.social__link {
  padding: 0;
  margin: 0;
  display: block;
  height: 100%;

  &:hover {
    background-color: #669ec0;
  }

  &:active {
    background-color: #5496bd;
  }

  &:active > .social__image {
    opacity: 0.3;
  }
}

.social__image {
  position: absolute;
  fill: $white-two;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  &--twitter {
    width: 18px;
    height: 14px;
  }

  &--facebook {
    width: 9px;
    height: 18px;
  }

  &--youtube {
    width: 20px;
    height: 14px;
  }
}
